<html>
<head>
  <%= javascript_include_tag "prototype" %>
     <script src="/javascripts/dragdrop.js" type="text/javascript"></script>  
     <script src="/javascripts/builder.js" type="text/javascript"></script>
   <script src="/javascripts/effects.js" type="text/javascript"></script>
 <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>     
 


    <style type="text/css">
    div.auto_complete {
      position:absolute;
      width:250px;
      background-color:white;
      border:1px solid #888;
      margin:0px;
      padding:0px;
    }
    ul.contacts  {
      list-style-type: none;
      margin:0px;
      padding:0px;
    }
    ul.contacts li.selected { background-color: #ffb; }
    li.contact {
      list-style-type: none;
      display:block;
      margin:0;
      padding:2px;
      height:32px;
    }
    li.contact div.image {
      float:left;
      width:32px;
      height:32px;
      margin-right:8px;
    }
    li.contact div.name {
      font-weight:bold;
      font-size:12px;
      line-height:1.2em;
    }
    li.contact div.email {
      font-size:10px;
      color:#888;
    }
    #list {
      margin:0;
      margin-top:10px;
      padding:0;
      list-style-type: none;
      width:250px;
    }
    #list li {
      margin:0;
      margin-bottom:4px;
      padding:0px;
      border:5px solid #ff00ff;
      cursor:move;
      background:white;
    }
  </style>

	
	  	<script type="text/javascript" language="javascript" charset="utf-8">
if(window.HTMLElement) {
    HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df=r.createContextualFragment(sHTML);
        this.parentNode.replaceChild(df,this);
        return sHTML;
        });

    HTMLElement.prototype.__defineGetter__("outerHTML",function(){
     var attr;
        var attrs=this.attributes;
        var str="<"+this.tagName.toLowerCase();
        for(var i=0;i<attrs.length;i++){
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+'="'+attr.value+'"';
            }
        if(!this.canHaveChildren)
            return str+">";
        return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
        });
       
 HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
  switch(this.tagName.toLowerCase()){
            case "area":
            case "base":
         case "basefont":
            case "col":
            case "frame":
            case "hr":
            case "img":
            case "br":
            case "input":
            case "isindex":
            case "link":
            case "meta":
            case "param":
            return false;
        }
        return true;

     });
}

		Event.observe( 
			window, 
			'load', 
			function() {
		  	  	    	  

    			
      listItems = $$('#list li');
   listItems.each(
     function(childele){

			 			childele.observe("mousedown", function(event){

              childele.setStyle({borderColor: '#ffb'});
            });
            
			childele.observe("mouseout", function(event){
			        
              childele.setStyle({borderColor: '#ff00ff'});
            });             
    }

)
 	  new Draggable('revertbox1',
	  {scroll:window});				
	  
	  new Draggable('revertbox2',
	  {scroll:window,
	  revert:true});	
	  
	  new Draggable('revertbox3',
	  {scroll:window,
	  revert:true});		
	  
	  new Draggable('revertbox4',
	  {scroll:window,
	  revert:true});	
	  
	  	  	  new Draggable('revertbox5',
	  {scroll:window,
	  revert:true});
	  
	  new Draggable('revertbox6',
	  {scroll:window,
	  revert:true});		  
	  
	  new Draggable('revertbox7',
	  {scroll:window,
	  revert:true});
					});      
					   
function getOrder() {
  var orderList = '';
  listItems = $$('#list li');
  listItems.each(
     function(childele){
     orderList += childele.getAttribute('recordid') + ', ';
     }
     )
       $('list-info').update('Updated order is: '+orderList);  


  }
	

		function do_delete(){
      listItems = $$('#list li');
//listItems = $('vidList').select('li');      
      var ulstring = '';
            var ulstring1 = '';


   listItems.each(
     function(childele){

							if (childele.down(0).innerHTML != "(empty landing zone)")
							{
                 ulstring = ulstring + childele.outerHTML;
                 }
                 else
                 {
                 ulstring1 = ulstring1 + childele.outerHTML;
									}
             
    });
           
                $('list').replace("<ul id='list'>"+ulstring + ulstring1+"</ul>");



    }

    



		
	</script>
	

</head>
<body>

      
<ul id="list" >
   <li id="item_1" recordid="1"> <div id="revertbox1" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 1
 </div></li>
   <li id="item_2" recordid="2"> <div id="revertbox2" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 2
 </div></li>
   <li id="item_3" recordid="3"> <div id="revertbox3" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 3
 </div></li>
   <li id="item_4" recordid="4"> <div id="revertbox4" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 4
 </div></li>
   <li id="item_5" recordid="5"> <div id="revertbox5" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 5
 </div></li>
   <li id="item_6" recordid="6"> <div id="revertbox6" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 6
 </div></li>
   <li id="item_7" recordid="7"> <div id="revertbox7" style="margin:0;padding:0;width:240px;height:32px;position:relative;background:#8fbc8f;">test module 7
 </div></li>
  </ul>


<p id="list-info"></p>
<%= sortable_element 'list',
      :constraint=>false, 
      :dropOnEmpty=> true,
      :onChange => 'getOrder' ,      
      :url => { :action => "order" } %>


<%=button_to_function "remove", "$('item_5').down(0).innerHTML='(empty landing zone)';$('item_1').down(0).innerHTML='(empty landing zone)';$('item_1').down(0).setStyle({backgroundColor: '#ffffff'});alert($('item_1').innerHTML);$('item_5').down(0).setStyle({backgroundColor: '#ffffff'})"%>
<%=button_to_function "confirm", "alert('confirmed! '+$('item_1').outerHTML);$('item_1').down(0).setStyle({backgroundColor: '#ffffff'})"%>

<%=button_to_function "confirm rank", "if (confirm('Is this the ranking you are happy with?')) {do_delete();alert($('list').innerHTML)}"%>

</body>
</html>      